<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/commons.css}"/>
    <link rel="stylesheet" th:href="@{/css/index.css}"/>

</head>
<body>

<div th:replace="admin/commons/bar::#header(activeUrl='index')"/>

<div class="container" id="app">

    <div th:replace="admin/commons/bar::#header_menu(menuActive='indexPublish.html',menuActive2='indexList.html',menuActive3='list')"/>

    <div class="main_form">
        <div class="list-group-item ">
            <form class="form-inline form_div">
                <select class="form-control" style="width: 200px; margin-right: 20px;" v-model="search.classify">
                    <option value="0">分类</option>
                    <option v-for="(classify,index) in classifyList" :value="classify.id">{{classify.name}}</option>
                </select>
                <select class="form-control" style="width: 200px; margin-right: 15px;" v-model="search.tag">
                    <option value="0">标签</option>
                    <option v-for="(tag,index) in tagList" :value="tag.id">{{tag.name}}</option>
                </select>

                <div class="checkbox">
                    <label>
                        <input type="checkbox" v-model="search.recommend"> 推荐
                    </label>
                </div>

                <button type="button" @click="searchBlogs" class="btn btn-default" >搜索</button>
            </form>
        </div>



        <table class="table table-bordered">
<!--            <div class="navbar-right">-->
<!--                <button type="button" class="btn btn-info add">添加</button>-->
<!--            </div>-->
            <thead>
                <th>#</th>
                <th>标题</th>
                <th>推荐</th>
                <th>状态</th>
                <th>更新时间</th>
                <th>操作</th>
            </thead>

            <tbody>
                <tr v-for="(blogs,index) in blogsList">
                    <td>{{blogs.id}}</td>
                    <td>{{blogs.title}}</td>
                    <td>{{blogs.recommend==1?"是":"否"}}</td>
                    <td>{{blogs.status==1?"是":"否"}}</td>
                    <td v-text="blogs.time"></td>
                    <td>
                        <button type="button" class="btn btn-info" @click="editor(blogs.id)">编辑</button>
                        <button type="button" class="btn btn-danger" @click="del(blogs.id)">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>

        <nav aria-label="..." class="main-pages">
            <ul class="pager">
                <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> 上一页</a></li>
                <li class="next"><a href="#">下一页 <span aria-hidden="true">&rarr;</span></a></li>
            </ul>
        </nav>

    </div>


</div>


<div th:replace="admin/commons/bar::#footer"/>

<script th:src="@{/js/jquery.min.js}"/>
<script th:src="@{/lib/vue/vue.min.js}"></script>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<!--<script th:src="@{/js/axios.min.js}"></script>-->
<script th:src="@{/js/bootstrap.min.js}"></script>

<script>

    $(function(){
        $(".ui.dropdown").dropdown();
    })

    var vue = new Vue({
        el:"#app",
        data(){
            return{
                blogsInfo:null,
                blogsList:null,
                search:{
                    classify:0,
                    tag:0,
                    recommend:0
                },
                classifyList:null,
                tagList:null,
                classify:null
            }
        },
        methods:{
            ajax:function(method,url,data,back){
                $.ajax({
                    type:method,
                    url:url,
                    contentType:"application/json;charset=utf-8",
                    dataType:"json",
                    data:data,
                    success:function(res){
                        back(res);
                    },
                    error:function(res){
                        console.log(res);
                        if(method!="get")
                            alert("数据加载出现错误！")
                    }
                })
            },
            init:function(){
                var that = this;
                this.ajax("get","/blogs/blogs",{page:1,size:10,title:null,classifyId:0,tagId:0,recommend:0},function(res){
                    that.blogsInfo = res;
                    that.blogsList = that.blogsInfo.list;
                })
                this.ajax("get","/blogs/classify",{page:0,size:0},function(res){
                    that.classifyList = res.list;
                })
                this.ajax("get","/blogs/tag",{page:0,size:0},function(res){
                    that.tagList = res.list;
                })
            },
            searchBlogs:function(){
                var that = this;

                this.search.tag = (!this.search.tag?0:this.search.tag);
                this.search.classify = (!this.search.classify?0:this.search.classify);
                this.search.recommend = (this.search.recommend==true?1:0)
                console.log(this.search);
                this.ajax("get","/blogs/blogs",{page:1,size:10,title:null,classifyId:that.search.classify,tagId:that.search.tag,recommend:that.search.recommend},function(res){
                    that.blogsInfo = res;
                    that.blogsList = that.blogsInfo.list;
                })
            },
            editor:function(id){
                window.location.href="indexPublish.html?active="+id;
            },del:function(id){
                var that = this;
                if(window.confirm('确定删除此博客吗？')){
                    this.ajax("DELETE","/blogs/blogs/"+id,null,function(res){
                        that.init();
                        return true;
                    })
                }else{
                    return false;
                }

            }
        },
        created(){
            this.init();

        }
    })

</script>

</body>
</html>